
/*--------------------------------------------------------------------------------
*===========						CUSTOMIZE						=============
*--------------------------------------------------------------------------------*/
.ui-datepicker-title{

}
.ui-datepicker .ui-datepicker-title select{
width: auto;
float: left;
padding: 2px;
font-size: 0.9em;
margin-right: 5px;
}
.ui-datepicker .ui-datepicker-title select:last-child{
margin-right: 0px;
}
/* CANH CHINH WRAPPER */
.wrapper{
min-width: 1000px;
margin:0px auto;

}
a{
	cursor: pointer;
	text-decoration:none;
}
/*------------------------------------------------------------
 * 							HEADER
 *------------------------------------------------------------*/

.big-textarea{
height: 50px;
}

#wrapper-header{
height: 80px;


}

#wrapper-header .wrapper .banner{
height: 50px;
line-height:50px;
/* background:url(../images/ui/banner-bg.png); */
background:#167262;

}
#wrapper-header .wrapper .banner .logo{
height: 50px;
line-height: 50px;
}
#wrapper-header .wrapper .banner .logo img{
vertical-align: middle;
margin-left: 20px;
}

#wrapper-header .wrapper .navigation{
	
	background-color: #26343f;
	color: #ffffff;
	border-top: 1px groove #ffffff;
	border-bottom: 1px groove #ffffff;
	
}
#wrapper-header .wrapper .navigation .menu{
float:left;
/*line-height: 30px;*/

}

#wrapper-header .wrapper .navigation .menu>ul>li{
display: block;
float:left;
border-right: 1px groove #ffffff;
position: relative;
margin: 0px;
}
#wrapper-header .wrapper .navigation .menu>ul>li:first-child{
/* border-left: 1px groove #ffffff; */
}
#wrapper-header .wrapper .navigation .menu>ul>li a{
color: #ffffff;
display: block;
font-size: 14px;
line-height: 20px;
padding: 5px 8px;
}

#wrapper-header .wrapper .navigation .menu>ul>li>ul{
padding: 2px;
top: 100%;
left: 0px;
position: absolute;
background: #26343f;
width: 200px;
z-index: 1000;
}
#wrapper-header .wrapper .navigation .menu>ul>li>ul>li{
display: block;

 border: 1px solid #26343f;


}
#wrapper-header .wrapper .navigation .menu>ul>li>ul>li>a{
    padding: 5px 8px 5px 25px;
}

#wrapper-header .wrapper .navigation .menu>ul>li>ul>li:hover{
/* background: #747474; */
background: url(../images/ui/bg-sidebar.gif) repeat-x -20px;;
border: 1px groove #ffffff;
}
#wrapper-header .wrapper .navigation .menu>ul>li>ul{
display: none;

}
#wrapper-header .wrapper .navigation .menu>ul>li:hover{
/* background: #747474; */
background: url(../images/ui/bg-sidebar.gif) repeat-x -20px;
}
#wrapper-header .wrapper .navigation .menu>ul>li:hover>ul{
display:block;

}

#wrapper-header .wrapper .navigation .options{
	/* height: 30px; */
	line-height: 30px;
	float:right;
	padding-right: 10px;
}
#wrapper-header .wrapper .navigation .options span{
	margin-left:5px;
}
#wrapper-header .wrapper .navigation .options span a{
color: white;
}


/*------------------------------------------------------------
 * 							SELECTION
 *------------------------------------------------------------*/
 
/*--------------- TOOL BAR ------------------*/
#wrapper-selection .wrapper .toolbar{
	min-height: 58px;
	
	border-bottom: 1px solid #e4e3e3;
	border-top: 1px solid #e4e3e3;
	margin-top: 5px;	
	position: relative;
	padding-right: 10px;
	padding-left: 10px;

}
#wrapper-selection .wrapper .toolbar .left{
	float:left;
	line-height: 58px;
}
#wrapper-selection .wrapper .toolbar .left img{
	vertical-align: middle;
}
#wrapper-selection .wrapper .toolbar .left a,#wrapper-selection .wrapper .toolbar .left a:visited{
	color:#26343F;
	font-weight: bold;
}

#wrapper-selection .wrapper .toolbar .right{
	float:right;
	
}
#wrapper-selection .wrapper .toolbar .right .options{

}
#wrapper-selection .wrapper .toolbar .right .options li{
	
	float:left;	
	
}
#wrapper-selection .wrapper .toolbar .right .options li a {	
	
	padding: 0px 10px;
	display: block;
	height: 52px;
	margin-top: 2px;
	color:black;
	text-align:center;
	border: 1px solid white;
	
}

#wrapper-selection .wrapper .toolbar .right .options li a:hover{
background-color: #F0F0F0;
border: 1px solid #E4E3E3;

}

#wrapper-selection .wrapper .toolbar .right .options li a span{
display:block;
width: 30px;
height: 30px;
background-position: center;
background-repeat: no-repeat;
}
#wrapper-selection .wrapper .toolbar .right .options li a.toolbar-insert span{
background-image: url(../images/ui/add-icon.png);

}

.toolbar-delete span{
background-image: url(../images/ui/delete-icon.png);

}

.toolbar-save span{
	background-image: url(../images/ui/save-icon.png);
}

.toolbar-close span{
	background-image: url(../images/ui/close-icon.png);
}



#wrapper-selection .wrapper .toolbar .right .options li a img {	
	
	/* vertical-align: middle; */
}
/*----------------------- FLASH MESSAGE -------------------------*/
#wrapper-selection .wrapper .clsFlashMessage{
	border-top: 3px solid #167262;
	border-bottom: 3px solid #167262;
	/* min-height: 50px; */
	margin-top: 10px;
	line-height: 40px;
	padding-left: 15px;
	color: #ffffff;
	font-weight:bold;
	background-color:#31BC92;
	text-align:center;
}


/* content */
/*--------------------- SEARCH BOX ------------------------*/
#wrapper-selection .wrapper .content{
padding:5px;
}
#wrapper-selection .wrapper .content .searchBox{	
line-height: 40px;
border-bottom:1px solid #e4e3e3;	
}	
#wrapper-selection .wrapper .content .searchBox .searchBoxLeft{
float:left;
width: 80px;
}
#wrapper-selection .wrapper .content .searchBox .searchBoxRight{
margin-left:80px;
}
#wrapper-selection .wrapper .content .searchBox .searchBoxRight .blockField{
margin-left: 5px;
float:left;
padding: 5px;
}
.searchBoxRight .blockField:last-child input,.searchBoxRight .blockField:last-child button {

margin-right: 10px;

}
#wrapper-selection .wrapper .content .searchBox label.title{
	display: block;
	font-weight: bold;
	float:left;
}
.searchBox input[type='text'], .searchBox select{
display: inline-block;
}
select.price option{
text-align: right;
}
#wrapper-selection .wrapper .content .searchBox #fromDate, #wrapper-selection .wrapper .content .searchBox #toDate{
	width: 80px;
	padding-left: 3px;
	
}
/*--------------- 	 TABLE - LIST ELEMENT	-----------------------*/
#wrapper-selection .wrapper .content .listElement{
margin-top: 10px;
}
#wrapper-selection .wrapper .content .listElement table{
	width: 100%;
	text-align: center;
}
#wrapper-selection .wrapper .content .listElement table  thead tr{
background-color: #e4e3e3;
}
#wrapper-selection .wrapper .content .listElement table  th{
padding-top: 5px;
padding-bottom: 5px;
border: 1px solid #26343F;
}
#wrapper-selection .wrapper .content .listElement table  td{
border: 1px solid #26343F;
padding-top: 5px;
padding-bottom: 5px;
vertical-align:middle;
}
#wrapper-selection .wrapper .content .listElement table  td img.thumbs{
width: 60px;
height: 60px;
}
/*
------------------ ORDER BY - SẮP XẾP ------------------
*/
#wrapper-selection .wrapper .content .listElement table th a{
display: inline-block;
vertical-align: middle;
color: black;
}
#wrapper-selection .wrapper .content .listElement table th a span{
display: inline-block;
width: 16px;
height: 16px;

}
/* hình mũi tên đi lên */
#wrapper-selection .wrapper .content .listElement table th a span.order-type-asc{
background-image: url(../images/ui/arrow-up.png);
background-repeat: no-repeat;
}
/* Hình mũi tên đi xuống */
#wrapper-selection .wrapper .content .listElement table th a span.order-type-desc{
background-image: url(../images/ui/arrow-down.png);
background-repeat: no-repeat;
}
/* Hình mũi tên trái */
#wrapper-selection .wrapper .content .listElement table th a span.order-type-not{
background-image: url(../images/ui/arrow-left.png);
background-repeat: no-repeat;
}
/*
------------------ CHANGE STATUS ------------------
*/
#wrapper-selection .wrapper .content .listElement table  td a.changestatus{
display:inline-block;
}
#wrapper-selection .wrapper .content .listElement table  td  span.publish{
background-image:url(../images/ui/publish.png);
background-repeat:no-repeat;
display:inline-block;
width: 25px;
height: 25px;
}
#wrapper-selection .wrapper .content .listElement table  td span.unpublish{
background-image:url(../images/ui/unpublish.png);
background-repeat:no-repeat;
background-position:center;
display:block;
width: 25px;
height: 25px;
}
/* 
------------------- DELETE - UPDATE ------------------
*/
#wrapper-selection .wrapper .content .listElement table  td a.edit
, #wrapper-selection .wrapper .content .listElement table  td a.delete
, #wrapper-selection .wrapper .content .listElement table  td a.upload-img
{
   
	width: 30px;
	height: 30px;
	margin-left: 3px;
	display: inline-block;
	border: 1px solid #ffffff;
	
	/* border-bottom: 3px solid #ffffff; */
	/* border: 1px solid #167262; */
	text-align: center;
	padding: 1px;
}
 #wrapper-selection .wrapper .content .listElement table  td a.option:hover{
	border: 1px solid #167262;
	background-color: #e4e3e3;
	/* border-bottom: 3px solid #167262; */
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
 }
  #wrapper-selection .wrapper .content .listElement table  td a.option span{
	display: inline-block;
	width: 25px;
	height: 25px;
	vertical-align: middle;
  }
.small-edit-icon{
	
	background-image: url(../images/ui/edit-icon.png);
	background-position: center;
	background-repeat: no-repeat;
}
.small-delete-icon{
	
	background-image: url(../images/ui/delete-icon.png);
	background-position: center;
	background-repeat: no-repeat;
}
.small-upload-img-icon{

	background-image: url(../images/ui/picture.png);
	background-position: center;
	background-repeat: no-repeat;
}
/* 
----------------- ĐIỀU KHIỂN PHÂN TRANG ---------------------
 */
 #wrapper-selection .wrapper .content .listElement .controller select{
 display: inline-block;
 }
#wrapper-selection .wrapper .content .listElement .controller{
line-height: 58px;
text-align: center;
}
#wrapper-selection .wrapper .content .listElement .controller a{
padding: 5px 8px;
margin-left: 5px;
border-radius: 5px;
border: 1px double #167262; 
}
#wrapper-selection .wrapper .content .listElement .controller b{
padding: 5px 8px;
border: 1px double #167262; 
margin-left: 5px;
border-radius: 5px;
}
#wrapper-selection .wrapper .content .listElement .controller a{
color:white;
background-color: #167262;
}


/* ---------	SELECT ALL COLUMN WIDTH 20PX --------------*/
#wrapper-selection .wrapper .content .listElement table  tr th:nth-child(2),#wrapper-selection .wrapper .content .listElement table  tr td:nth-child(2){
width: 20px;
}


/* 
------------	FORM INSERT - UPDATE 	--------------------
 */
#wrapper-selection .wrapper .content #frmAdminForm{

}
/*  #frmAdminForm  dt{
clear:left;
width: 300px;
padding: 5px;
margin-top: 10px;
text-align: right;
}
#frmAdminForm  dd{

padding: 5px;
margin-top: 10px;
}
#frmAdminForm  dd, #frmAdminForm  dt{
float:left;

} */
/* ===============  NEW EDIT ===============*/
#frmAdminForm>dl>dd{
/* border: 1px solid  #167262; */
padding-bottom: 20px;
margin-bottom: 10px;
}

#frmAdminForm>dl>dt{
display: none;
}
#frmAdminForm  dt{
clear:left;
width: 200px;
padding: 5px;
margin-top: 10px;
text-align: right;
}
#frmAdminForm  .display-group dd{

padding: 5px;
margin-top: 10px;
}
#frmAdminForm .display-group dd, #frmAdminForm  .display-group dt{
float:left;
}

#frmAdminForm .display-group  legend{
	/* background-color: #e4e3e3; */
	/* border-bottom: 1px solid #aaaaaa; */
	/* background: #cccccc url(../images/ui/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x; */
	background: #cccccc;
	font-size: 1.3em;
	color: #000000;
	display: block;
	padding: 5px 10px;
	width: 100%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	text-transform: uppercase;
	/* font-weight: bold; */
}

/* ============ END NEW EDIT ===============*/
#frmAdminForm .more-image{
color: #000000;
}
#frmAdminForm dd  input[type="file"]{
padding: 5px;
background: #cccccc;

}
#frmAdminForm dd  input[type="text"]{
width: 500px;
padding-left: 5px;
border: 1px solid #818384;
outline: none; 
}
#frmAdminForm dd  input[type="text"]:hover,#frmAdminForm dd  input[type="text"]:focus{
background-color: #FFFFDD;
border: solid 1px #646464;

}
#frmAdminForm dd input.datepicker{
width: 150px;
}
#frmAdminForm div.row{
float:left;
text-align: center;
}
#frmAdminForm div.row>div{
float: left;
line-height: 30px;
padding: 5px;
}
#frmAdminForm dd img{
	width: 60px;
	height: 60px;
}

/* Bắt lỗi */
#frmAdminForm dd ul li{
border: 1px solid red;
padding:2px 5px;
margin-top: 1px;
background-color:#FFC8C8;
color:red;
}
#frmAdminForm .small-textarea{
	height: 50px;
	
}



/* ------------------------------------------------------------
*						FOOTER
*-------------------------------------------------------------*/
#wrapper-footer .wrapper{
border-top: 5px solid #167262;
border-bottom: 1px solid #167262;
min-height: 50px;
margin-top: 20px;
padding: 5px;
line-height: 50px;

}

#wrapper-footer .wrapper p{
float:right;
margin-right: 30px;
}

/* ------------------------------------------------------------
*						LOGIN
*-------------------------------------------------------------*/
#login-box{
margin: 100px auto 150px;
width: 500px;
border: 1px solid #CAC9CA;
padding: 30px;
}
/* Thẻ head */
#login-box h1{
text-align: center;
font-size: 20px;
margin-bottom: 10px;
font-weight: bold;
color: #167262;
}

/* khung trái */
#login-box  #login-box-left{
width: 150px;
float:left;
}
/* khung phải */
#login-box  #login-box-right{
margin-left: 150px;
border: 1px solid #CAC9CA;
padding: 10px;
}
#login-box  #login-box-right fieldset{
margin-top: 10px;
}
#login-box  #login-box-right label{
width: 100px;
float:left;
display: block;
}
#login-box  #login-box-right  input[type='text'], #login-box  #login-box-right  input[type='password'] {
float:right;
width: 150px;
display: block;
}
#login-box  #login-box-right  input[type='submit']{
float:right;
}

/* ---------------------------------------------------------------------
*				INDEX - LIST-ITEM-MENU SITE ADMIN/INDEX/INDEX
*----------------------------------------------------------------------*/
.content #list-menu-item{
margin-top: 20px;
margin-bottom: 20px;
}
.content #list-menu-item a{
margin: 0px 20px 20px 0px;
display: block;
width: 110px;
min-height: 100px;
float:left;

/* margin-top: 20px; */
background-color: #18222b;
color: white;
/* font-weight: bold; */
text-align:center;
padding: 5px;
vertical-align: middle;

}
.content #list-menu-item a:hover{
background-color: #167262;
}
.content #list-menu-item a img{
display: block;
margin: auto;
vertical-align: middle;
padding: 10px 0px;
}
.content #list-menu-item a span{
display: inline-block;
vertical-align: middle;

}

/* ------------------------------------------------------------
*						UPLOAD MULTI FILE
*-------------------------------------------------------------*/
.content .block{
	border: 1px solid #cccccc;
	padding: 5px;
	margin-bottom: 10px;
}
.content .block>.title{
	background-color: #cccccc;
	color: #000000;
	display: block;
	padding: 8px 10px;
	border: 1px solid #aaaaaa;
	
	background: #cccccc;
	font-size: 1.5em;
}
.content .block>.content{
margin-top: 5px;
padding: 0px;
}

/*
	DÀNH CHO PHẦN MULTI UPLOAD IMAGE
*/
#upload-product-image .block{
	border: 1px solid #cccccc;
	/* padding: 5px; */
	margin-bottom: 10px;
}
#upload-product-image .block>.title{
	background-color: #cccccc;
	color: #000000;
	display: block;
	padding: 8px 10px;
	/* border: 1px solid #aaaaaa; */
	
	background: #cccccc;
	font-size: 1.5em;
}
#upload-product-image .block>.content{
margin-top: 5px;
padding: 5px 5px 15px;
}
#upload-product-image ul.list-image li{
display: block;
float: left;
margin-right: 5px;
margin-top: 5px;
padding: 1px;
min-width: 120px;
max-height: 160px;
border: 1px solid #cccccc;
padding: 2px;
}
#upload-product-image ul.list-image li:hover{
/* background: #167262; */
}
#upload-product-image ul.list-image li .image{
height: 120px;

}

#upload-product-image ul.list-image li .image img{
vertical-align: middle;
}
#upload-product-image ul.list-image li .controller{
text-align: center;
padding: 2px;
/* background: #cccccc url(../images/ui/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x; */
background: #cccccc;
margin-top: 5px;
}
#upload-product-image ul.list-image li .controller a{
display: inline-block;

}
#upload-product-image ul.list-image li .controller a span{
	width: 30px;
	height: 30px;
	display: block;
	background-image: url(../images/ui/close-icon.png);
	background-repeat: no-repeat;
}
/*
.content #upload-muiltifile{
	padding: 5px;
}
.content .block{
	margin-bottom: 20px;
}
.content .block h3{
	font-weight: bold;
	padding: 5px 8px;
	
}
.content #upload-muiltifile #list-image-has-upload .block-image{
	width: 150px;
	overflow:hidden;
 	float:left;
	border: 1px solid #ffffff;
}
.content #upload-muiltifile #list-image-has-upload .block-image:hover{
	border: 1px solid #167262;
}
.content #upload-muiltifile #list-image-has-upload .block-image .image{
	width: 120px;
	height: 120px;
	overflow:hidden;
	text-align: center;
	margin:auto;
}
.content #upload-muiltifile #list-image-has-upload .block-image p{
	text-align: center;
}
.content #upload-muiltifile #list-image-has-upload .block-image p a{
	display: inline-block;
}
.content #upload-muiltifile #list-image-has-upload .block-image p a span{
	width: 30px;
	height: 30px;
	display: block;
	background-image: url(../images/ui/close-icon.png);
	background-repeat: no-repeat;
}
.content #upload-muiltifile table td{
	padding: 5px;
}
*/
/* ORDER */
.content .order table{
width: 100%;
border: 1px solid #000000;
margin-top: 15px;
text-align: center;
}
.content .order table caption{
font-weight: bold;
}
.content .order table  thead tr{
background-color: #e4e3e3;
}
.content .order table  th{
padding-top: 5px;
padding-bottom: 5px;
border: 1px solid #26343F;
}
.content .order table  td{
border: 1px solid #26343F;
padding: 5px;
vertical-align:middle;
}
.content .order table.order-detail-table tr:last-child td, .content .order table.order-detail-table tr td:nth-of-type(3n),
.content .order table.order-detail-table tr td:last-child{
text-align: right;
}
/* WEBSETTING */

.websetting textarea{
height: 100px;
}
